<template>
    <div class="banner">
        <div class="bg"></div>
        <div class="container-fluid">
            <!-- {{ breadcrumbStore.breadcrumbs }} -->
            <h1>{{ breadcrumbStore.breadcrumbs[breadcrumbStore.breadcrumbs.length - 1].title }}</h1>

            <div class="tools-list">
                <el-dropdown :teleported="false" v-if="isShowSet">
                    <el-icon class="16" color="#fff"><Setting /></el-icon>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="goPage('/console/user/preferences/edit')">{{ $t('banner.preferences_dropdown.dropdown_1') }}</el-dropdown-item>
                            <el-dropdown-item @click="goPage('/console/user/preferences/changePwd')">{{ $t('banner.preferences_dropdown.dropdown_2') }}</el-dropdown-item>
                            <el-dropdown-item @click="goPage('/console/user/preferences/language')">{{ $t('banner.preferences_dropdown.dropdown_3') }}</el-dropdown-item>
                            <el-dropdown-item @click="goPage('/console/user/preferences/forum')">{{ $t('banner.preferences_dropdown.dropdown_4') }}</el-dropdown-item>
                            <el-dropdown-item @click="goPage('/console/user/preferences/editor')">{{ $t('banner.preferences_dropdown.dropdown_5') }}</el-dropdown-item>
                            <el-dropdown-item @click="goPage('/console/user/preferences/calendar')">{{ $t('banner.preferences_dropdown.dropdown_6') }}</el-dropdown-item>
                            <el-dropdown-item @click="goPage('/console/user/preferences/contentbank')">{{ $t('banner.preferences_dropdown.dropdown_7') }}</el-dropdown-item>
                            <el-dropdown-item @click="openMsgSetDrawer">{{ $t('banner.preferences_dropdown.dropdown_8') }}</el-dropdown-item>
                            <el-dropdown-item @click="goPage('/console/user/preferences/notificationPreferences')">{{ $t('banner.preferences_dropdown.dropdown_9') }}</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                <!-- <template v-if="isShowForumSet">
                    <el-input v-model="forumSearchKey" style="max-width: 220px" :placeholder="$t('banner.forum_search.placeholder')" class="input-with-select" @keyup.enter="forumSearchHadne">
                        <template #append>
                            <el-button icon="Search" @click="forumSearchHadne" />
                        </template>
                    </el-input>
                    <el-dropdown :teleported="false">
                        <el-icon class="16" color="#fff"><Setting /></el-icon>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>{{ $t('banner.forum_search.dropdown_1') }}</el-dropdown-item>
                                <el-dropdown-item>{{ $t('banner.forum_search.dropdown_2') }}</el-dropdown-item>
                                <el-dropdown-item>{{ $t('banner.forum_search.dropdown_3') }}</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </template> -->
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import { useMsgSetDrawerStore } from '@/stores/msgSetDrawer'

import { goPage } from '@/utils/global'
import { useBreadcrumbStore } from '@/stores/breadcrumb'

const route = useRoute()
const router = useRouter()
const breadcrumbStore = useBreadcrumbStore()
const msgSetDrawerStore = useMsgSetDrawerStore()
const openMsgSetDrawer = () => {
    msgSetDrawerStore.openMsgSetDrawer()
}

const isShowSet = computed(() => {
    if (route.path === '/console/user/profile') {
        return true
    } else {
        return false
    }
})

// 讨论区
const isShowForumSet = computed(() => {
    if (route.name === 'modForum' || route.name === 'modForumDiscuss') {
        return true
    } else {
        return false
    }
})
const forumSearchKey = ref()
const forumSearchHadne = () => {
    goPage('/console/mod/forum/search', undefined, {
        searchKey: forumSearchKey.value,
    })
}
</script>

<style lang="less" scoped>
.banner {
    padding: 20px 0;
    min-height: 210px;
    position: relative;
    background-color: #f3763c;

    display: flex;
    align-items: flex-end;

    .container-fluid {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .bg {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        background: url('@/assets/img/bannerBg.jpg') no-repeat 50% 50% / cover;
        opacity: 0.15;
    }

    h1 {
        font-size: 30px;
        line-height: 50px;
        color: #fff;
        font-weight: normal;
    }

    .tools-list {
        display: flex;
        align-items: center;
        gap: 15px;
    }
}
</style>
